<template>
  <div class="home">
    <el-container>
      <!-- ElementUI：组件的名称就是类名 -->
      <el-header>
        <div @click="$router.push('/welcome')">
          <img src="../assets/logo.png" alt="" />
          <span>电商后台管理系统</span>
        </div>
        <el-button type="info" @click="logout">退出</el-button>
      </el-header>
      <!-- 页面主体区域 -->
      <el-container>
        <!-- 侧边栏 -->
        <el-aside :width="isCollapse ? 'auto' : '200px'">
          <!-- 侧边栏菜单区域 -->
          <el-menu
            :collapse="isCollapse"
            :collapse-transition="false"
            :default-active="defActivepath"
            unique-opened
            router
            background-color="#333744"
            text-color="#fff"
            active-text-color="#409EFF"
          >
            <el-submenu v-for="v in menus" :key="v.id" :index="v.id + ''">
              <template #title>
                <i :class="menuIconMapForLevel1[v.id]"></i>
                <span>{{ v.authName }}</span>
              </template>
              <template #default>
                <el-menu-item
                  v-for="v2 in v.children"
                  :key="v2.id"
                  :index="`/${v2.path}`"
                >
                  <template #default>
                    <i class="el-icon-location"></i>
                  </template>
                  <template #title>
                    {{ v2.authName }}
                  </template>
                </el-menu-item>
              </template>
            </el-submenu>
          </el-menu>
          <div class="collapse_toggle" @click="isCollapse = !isCollapse">
            <i
              :class="isCollapse ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"
            ></i>
          </div>
        </el-aside>
        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>
          <el-footer>
            ©2020 VueShop (香)-2017-0020
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      isCollapse: false,
      menus: [],
      menuIconMapForLevel1: {
        125: 'el-icon-s-custom',
        103: 'el-icon-lock',
        101: 'el-icon-goods',
        102: 'el-icon-s-order',
        145: 'el-icon-s-data',
      },
    };
  },
  computed: {
    defActivePath() {
      // this.$route 中保存着当前路由相关的信息
      return this.$route.path.split('/').splice(0, 2).join('/');
    },
  },
  methods: {
    logout() {
      localStorage.removeItem('token');
      this.$router.push('/login');
    },
  },
  created() {
    this.__apis.getLeftMenus().then((res) => {
      if (res.data.meta.status === 200) {
        this.menus = res.data.data;
      } else {
        this.$message.error(res.data.meta.msg);
      }
    });
  },
};
</script>

<style lang="less" scoped>
.home {
  // & 表示上一级选择器
  & > .el-container {
    height: 100vh;
    .el-header {
      background-color: #333744;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      div {
        display: flex;
        align-items: center;
        img {
          width: 50px;
        }
        span {
          margin-left: 20px;
          font-size: 24px;
        }
      }
    }
    .el-container {
      .el-aside {
        background-color: #333744;
        position: relative;
        .el-menu {
          border-right: unset;
        }
        .collapse_toggle {
          position: absolute;
          width: 100%;
          bottom: 0;
          cursor: pointer;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 60px;
          &:hover {
            background-color: #292c36;
          }
          i {
            font-size: 24px;
          }
        }
      }
      .el-container {
        .el-main {
          background-color: #eaedf1;
        }
        .el-footer {
          background-color: #333744;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
</style>
